<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <el-dialog :visible.sync="showDialog" title="AI导入厂房" :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="step != 1" :before-close="beforeClose" width="600px">

            <div v-if="step == 1">
                <el-form label-position="left">
                    <el-form-item label="请选择城市">
                    hello    cityid: {{ cityId }}
                        <el-select size="small" v-model="cityId" style="width: 478px;" placeholder="请选择">
                            <el-option v-for="item in items" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

            <div v-if="step == 2" style="text-align: center;">
                <div class="tip-title">正在导入，请等待...</div>
                <div class="images">
                    <el-image style="width: 300px;" :src="require('@/assets/images/platform.png')"></el-image>
                    <div class="robot-shadow" style=""></div>
                    <el-image class="robot" :src="require('@/assets/images/robot.png')"></el-image>
                </div>
                <div class="tips">由于受网络情况影响，可能会导入失败，通过设置代理IP可有效提高成功率</div>
            </div>

            <div v-if="step == 3" style="text-align: center;">
                <div v-if="importSuccess">
                    <div class="tip-title">{{ importSuccessText || '导入成功' }}</div>
                    <i class="el-icon-success" style="font-size: 200px;color: #029b00;margin: 60px auto;"></i>
                </div>
                <div v-else>
                    <div class="tip-title">{{ importFailText || '导入失败，请重试' }}</div>
                    <i class="el-icon-error" style="font-size: 200px;color: #f56c6c;margin: 60px auto;"></i>
                </div>
                <div class="tips">由于受网络情况影响，可能会导入失败，通过设置代理IP可有效提高成功率</div>
            </div>

            <div slot="footer" v-if="step == 1">
                <el-button @click="cancleHandle" size="small" icon="el-icon-close">取消</el-button>
                <el-button @click="submitHandle" type="primary" size="small" icon="el-icon-check">确定</el-button>
            </div>
        </el-dialog>
        <el-button size="small" @click="showDialog = true">
            <div style="display: flex;align-items: center;"><i class="icon-ai"></i>AI导入厂房</div>
        </el-button>
    </div>
</template>

<script>
import { getCityList } from "@/api/city";
import { AiImportPost, getAiImportStatus } from "@/api/post";
export default {
    name: "AiImport",
    data() {
        return {
            cityId:0,
            items: [],
            showDialog: false,
            step: 1,
            importSuccess: false,
            importSuccessText: '',
            importFailText: '',
            intervalId: null,
        }
    },
    mounted: function () {
        this.loadData();
    },
    watch: {
        showDialog: function (v) {
            if (v) {
                this.loadStatus();
                this.startMethodInterval()
            }
        }
    },
    methods: {
        cancleHandle: function () {
            this.showDialog = false;
        },
        beforeClose(done) {
            this.$emit('success')
            this.step = 1;
            this.importSuccess = false;
            this.importSuccessText = '';
            this.importFailText = '';
            clearInterval(this.intervalId);
            this.intervalId = null;
            this.cityId = 0;
            this.showDialog = false;
        },
        submitHandle: function (e) {
            if (!this.cityId) {
                this.$message.error("请选择城市");
                return false;
            }
            this.step = 2;
            AiImportPost({ city_id: this.cityId }).then(resp => {
                if (resp.code != 0) {
                    return false;
                }
                this.startMethodInterval()
            }).finally(() => {
            });
        },
        startMethodInterval() {
            this.intervalId = setInterval(() => {
                this.loadStatus();
            }, 5000); // 每隔5秒执行一次 loadStatus 方法
        },
        loadData() {
            this.loading = true;
            getCityList().then((resp) => {
                this.loading = false;
                if (resp.status === 0) {
                    this.items = resp.data;
                }
            });
        },
        loadStatus() {
            this.loading = true;
            getAiImportStatus().then((resp) => {
                this.loading = false;
                if (resp.code != 0) {
                    clearInterval(this.intervalId);
                    return false;
                }
                if (resp.data.code == 0) {
                    clearInterval(this.intervalId);
                    return
                }
                if (resp.data.code == 1) {
                    this.step = 2;
                }
                if (resp.data.code == 2) {
                    this.importSuccess = true;
                    this.step = 3;
                    this.importSuccessText = resp.data.message;
                    clearInterval(this.intervalId);
                }
                if (resp.data.code == 3) {
                    this.importSuccess = false;
                    this.step = 3;
                    this.importFailText = resp.data.message;
                    clearInterval(this.intervalId);
                }


            });
        },
    }

}
</script>

<style scoped>
.icon-ai {
    width: 14px;
    height: 14px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
    background-image: url('~@/assets/images/ai-btn.svg');
}

.tip-title {
    font-size: 18px;
    color: #333333;
}

.images {
    margin: 80px auto 40px auto;
    position: relative;
}

.robot {
    width: 100px;
    position: absolute;
    right: 220px;
    top: -30px;
    animation: swingUpDown 1.5s infinite;
}

@keyframes swingUpDown {

    0%,
    100% {
        top: -30px;
        animation-timing-function: ease-in-out;
    }

    50% {
        top: -50px;
        animation-timing-function: ease-out;
    }
}

.robot-shadow {
    width: 100px;
    height: 50px;
    background: radial-gradient(ellipse at center, black 30%, transparent 70%);
    transform: rotate(25deg);
    position: absolute;
    right: 220px;
    bottom: 80px;
    animation: shadowUpdate 1.5s infinite;
}

@keyframes shadowUpdate {

    0%,
    100% {
        opacity: 0.5;
        animation-timing-function: ease-in-out;
    }

    50% {
        opacity: 0.1;
        animation-timing-function: ease-out;
    }
}

.tips {
    font-size: 12px;
    color: #666666;
}
</style>
